import { useEffect, useState } from "react"
function News() {
    // 新闻列表数据
    const [list, setList] = useState([]);
    // 新闻列表 页数
    const [page, setPage] = useState(1);
    // 开关：上一页没刷新，下一页不许刷新
    const [flag, setFlag] = useState(true);

    function getNews() {
        fetch("http://dida100.com/mi/list.php?channel_id=hot&page=" + page)
            .then((res) => res.json())
            .then((res) => {
                console.log(res.result)
                // 更新数据
                setList(list.concat(res.result))
                // 开关打开
                setFlag(true)
            })
    }

    // 检查是否更新下一页
    function check() {
        // 获取最后一条数据
        var last = document.querySelector(" .item:last-child");
        // 获取 last 距离浏览器顶部的距离（高度）
        var top = last.getBoundingClientRect().top;
        // 浏览器高度
        var heigth = window.innerHeight;
        if (top < heigth && flag) {
            setPage(page + 1);
            setFlag(false)
        }
    }

    useEffect(() => {
        // 添加监听事件 滚动条事件
        window.addEventListener("scroll", check);
        return () => {
            // 移除监听
            window.removeEventListener("scroll", check)
        }
    }, [flag])

    // 页数变化时  就获取一条数据
    useEffect(() => {
        getNews()
    }, [page])

    return (<div>
        {
            // map 渲染数据 （箭头函数 没有{ }）
            list.map((item, index) =>
                <div key={index} className="item">
                    <h4>{item.title}</h4>
                    <p>{item.summary}</p>
                    <hr />
                </div>
            )
        }
    </div>);
}

export default News;